<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li class="active">导航0</li>
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
        </ul>
        <p id="contents">点击了0</p>
    </div>
    <script>
        function createInc(startValue){
            return function(step){
                startValue+=step;
                return startValue;
            }
        }
        var inc = createInc(5);
        console.log(inc(1)); //6
        console.log(inc(2)); //8
        inc = createInc(5);
        console.log(inc(1))  //6

   
        //练习-与demo1中的倒数第二个类似/ppt p7
        var tabs = document.getElementsByTagName("li");
        var contents = document.getElementById("contents");
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].onclick = function() {
                for (var j = 0; j < tabs.length; j++) {
                    tabs[j].className = "";
                }
                this.className = "active";
                    contents.innerHTML = "点击了" + i;
            };
        }
        // 四个函数但是是一个i
        /*
        var i = 0;
        tabs[0].onclick = function() {
            contents.innerHTML = "点击了" + i;
        };
        i++;
        tabs[1].onclick = function() {
            contents.innerHTML = "点击了" + i;
        };
        i++;
        tabs[2].onclick = function() {
            contents.innerHTML = "点击了" + i;
        };
        i++;
        tabs[3].onclick = function() {
            contents.innerHTML = "点击了" + i;
        };
        i++; //4
        */
        // 通过立即执行表达式解决
        var tabs = document.getElementsByTagName("li");
        var contents = document.getElementById("contents");
        for (var i = 0; i < tabs.length; i++) {
            (function(i){
                tabs[i].onclick = function() {
                    for (var j = 0; j < tabs.length; j++) {
                        tabs[j].className = "";
                    }
                    this.className = "active";
                        contents.innerHTML = "点击了" + i;
                };
            })(i);
        }

        function f(){
            var getNumFuncs = [];
            for(var i=0;i<10;i++){
                getNumFuncs[i] = function(){
                    return i;
                }
            }
            return getNumFuncs;
        }
        var temp = f();
        temp[3](); //10
        temp[2](); //10
        temp[5](); //10
        temp[6](); //10
        temp[0](); //10
        // i是十个函数共享的
        function f(){
            var getNumFuncs = [];
            for(var i=0;i<10;i++){
                (function(j){ //形参
                    getNumFuncs[j] = function(){return j;}
                })(i); //实参 传入的参数
            }
            return getNumFuncs;
        }
        // 十个i 不共享 函数作用域
        var temp = f();
        temp[3](); //10

        for(var i=0;i<3;i++){
            setTimeout(() => {
                console.log(new Date,i)
            }, 1000*i);
        }
        for(var i=0;i<3;i++){
            (function(j){
                setTimeout(() => {
                    console.log(new Date,j)
                }, 1000*i);
            })(i);
        }
    </script>
</body>
</html>